<template>
	<view>
		<view class="vmb-my-header">
			<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
				<view class="u-m-r-10">
					<u-avatar :src="pic" size="140"></u-avatar>
				</view>
				<view class="u-flex-1">
					<view v-show="showFlag">
						<view class="u-font-18 u-p-b-20">{{username}}</view>
						<view class="u-font-14 u-tips-color">欢迎来到jerry-shop</view>
					</view>
					<view v-show="!showFlag" @click="toLogin">
						<view class="u-font-18 u-p-b-20">尚未登陆</view>
						<view class="u-font-14 u-tips-color">点击跳转登录界面</view>
					</view>
				</view>
				<view class="u-m-l-10 u-p-10">
					<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
				</view>
			</view>
		</view>
		<view class="vmb-my-nav">
			<u-grid :border="false" :col="4" hover-class="hover-class">
				<u-grid-item v-for="(item, index) in list" :index="index" :key="index" @click="toGrid(index)">
					<u-icon :name="item.key1" :size="46"></u-icon>
					<text class="grid-text">{{ item.key2 }}</text>
				</u-grid-item>
			</u-grid>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item @tap="openPage('pages/my/address')" icon="map" title="收货地址"></u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="coupon" title="卡券"></u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="setting" title="设置"></u-cell-item>
			</u-cell-group>
		</view>
		<!-- <view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="" title="时间原因未来的及重构当前页面,敬请期待"></u-cell-item>
			</u-cell-group>
		</view> -->
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item @click="logout" icon="" title="退出"></u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[{
					key1: 'integral',
					key2: '订单中心'
				},{
					key1: 'kefu-ermai',
					key2: '客服热线'
				},{
					key1: 'coupon',
					key2: '商城首页'
				},{
					key1: 'gift',
					key2: "礼品中心"
				}],
				pic: 'https://gips1.baidu.com/it/u=1080531017,1714037512&fm=3039&app=3039&f=PNG?w=1024&h=1024',
				showFlag: false,
				username: '',
			}
		},
		onShow() {
			if (uni.getStorageSync('username') !== '') {
				this.username = uni.getStorageSync('username');
				this.showFlag = true;
			}
		},
		onLoad() {

		},
		methods: {
			toGrid(index){
				if(index === 0){
					uni.navigateTo({
						url:"/pages/order/OrderList"
					})
				}
			},
			logout() {
				this.showFlag = false;
				uni.clearStorageSync();
				
			},
			toLogin() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},

		}
	}
</script>

<style lang="scss">
	.vmb {
		&-my-header {
			box-sizing: border-box;
			width: 100%;
			height: 300rpx;
			background: url("~@/static/my/header.png");
			background-size: 100% 100%;
			padding: 60rpx 30rpx;
			border-radius: 0 0 60rpx 60rpx;

			::v-deep {
				.u-avatar {
					border: 2px solid #FFFFFF;
				}

				.u-p-b-20 {
					color: #FFFFFF
				}

				.u-tips-color {
					color: #FFFFFF
				}

				.u-icon__icon {
					color: #FFFFFF !important
				}


			}
		}

		&-my-nav {
			width: calc(100% - 60rpx);
			margin-left: auto;
			margin-right: auto;
			height: 150rpx;
			background: linear-gradient(to right, #1b3185, #01235a);
			margin-top: -80rpx;
			border-radius: 20rpx;

			::v-deep {
				.u-grid {

					.u-grid-item {
						background: transparent !important;
						color: #FFFFFF !important;
					}
				}
			}
		}
	}
</style>